<!--用户管理页-->
<template>
  <div style="height:6vh;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">部门管理</span>
    <el-button type="primary" @click="saveDialogTitle"
               style="float:right;margin-top:10px;">新建部门</el-button>
  </div>
  <!-- 新建用户弹窗 -->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose">

    <el-form label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="部门名称">
            <el-input placeholder="请输入部门名称" v-model="deptSaveForm.deptName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人">
            <el-select v-model="deptSaveForm.userId" placeholder="请选择负责人">
              <el-option v-for="item in DeptLeader" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="deptSaveForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门状态">
            <el-select placeholder="请选择" v-model="deptSaveForm.status">
              <el-option label="正常" :value=1></el-option>
              <el-option label="停用" :value=0></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary"
                 @click="saveDept">保存</el-button>
    </template>
  </el-dialog>
  <!--用户搜索卡片-->
  <el-card style="margin: 20px 20px 0 20px;height: 80px;line-height: 55px">
    <el-form :inline="true">
      <el-form-item label="部门名称" style="width: 200px;" @keydown.enter="loadDeptList">
        <el-input placeholder="请输入部门名称" v-model="searchDeptForm.deptName"></el-input>
      </el-form-item>
      <el-form-item label="负责人" style="width: 200px;" @keydown.enter="loadDeptList">
        <el-input placeholder="请输入负责人" v-model="searchDeptForm.leader"></el-input>
      </el-form-item>
      <el-form-item label="账号状态" style="width: 170px;">
        <el-select placeholder="请选择" v-model="searchDeptForm.status" @change="loadDeptList" >
          <el-option label="正常" value=1></el-option>
          <el-option label="停用" value=0></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadDeptList">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 用户列表 -->
  <el-card style="margin:20px;">
    <el-table :data="DeptTableDate">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="deptName" label="部门名称"  align="center"/>
      <el-table-column prop="leader" label="负责人"  align="center"/>
      <el-table-column prop="phone" label="手机号"  align="center"/>
      <el-table-column prop="status" label="部门状态"  align="center"
                       :formatter="deptStatusFormatter"/>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editDept(scope.row.id)">编辑部门</el-button>
          <el-button link type="primary" size="small" @click="deleteDept(scope.row.id)">删除部门</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import {ElMessage} from "element-plus";
import api from "@/util/request";
import axios from "axios";

const dialogTitle = ref('新建部门');
const dialogVisible = ref(false);
//网关
const gateway = '/system_api';

//搜索条件
const searchDeptForm = ref({
  deptName:'',
  leader:'',
  status:''
});

//查询部门列表
const loadDeptList = () => {
  let data = qs.stringify(searchDeptForm.value);
  //console.log(data);
  api.get(gateway+"/oa/dept/select?"+data).then((response)=>{
    DeptTableDate.value = response.data.data;
  })
}
onMounted(()=>{
  loadDeptList();
})

//重置查询条件
const resetSearch = () => {
  searchDeptForm.value = {
    deptName:'',
    status:''
  }
  loadDeptList();
}


//获取职级在20以上及不是部门负责人的用户
//定义数组用来存储这些数据
const DeptLeader = ref([{id:'',username:''}]);
//查询
const DeptLeaderList = () => {
  api.get(gateway+"/oa/user/select/user/level").then((response)=>{
    //console.log(response.data.data);
    DeptLeader.value = response.data.data;
    //console.log(DeptLeader.value);
  })
}
onMounted(()=>{
  DeptLeaderList();
})

const DeptTableDate = ref([]);
//新增部门
const deptSaveForm = ref({
  deptName:'',
  userId:'',
  phone:'',
  status:''
});

//新增部门弹窗
const saveDialogTitle = () => {
  dialogTitle.value = '新建部门';
  dialogVisible.value = true;
}

//保存部门
const saveDept = () => {
  let data = qs.stringify(deptSaveForm.value);
  console.log(data);
  api.post(gateway+"/oa/dept/save",data).then((response)=>{
    ElMessage.success("保存成功!");
    deptSaveForm.value = {};
    dialogVisible.value = false;
    loadDeptList();
  })
}

//关闭保存部门弹窗
const handleClose = () => {
  if(confirm('确定要关闭此弹窗?')){
    deptSaveForm.value = {deptName: '', leader:'', phone:'', status:''};
    dialogVisible.value = false;
  }
}

//编辑部门
const editDept = (id) => {
  dialogTitle.value = '编辑部门';
  dialogVisible.value = true;
  //console.log(id);
  api.get(gateway+"/oa/dept/select?id="+id).then((response)=>{
    //console.log(response.data.data);
    deptSaveForm.value = response.data.data[0];
    let userId = parseInt(deptSaveForm.value.userId);
    api.get(gateway+"/oa/user/select?id="+userId).then((response)=>{
      //console.log(response.data.data);
      let data = response.data.data;
      //console.log(data);
      DeptLeaderList();
      DeptLeader.value.push({id:data[0].id,username:data[0].username});
      //console.log(DeptLeader.value);
    })
  })
}

//删除部门
const deleteDept = (deptId) => {
  if(confirm("确认删除该部门吗?")){
    axios.post(gateway+"/oa/dept/delete/"+deptId).then((response)=>{
      if(response.data.code == 2000){
        ElMessage.success("删除成功!");
        loadDeptList();
      }else {
        ElMessage.error("该部门下有员工，不能删除!");
      }
    })
  }
}


//内容显示转换(部门状态)
const deptStatusFormatter = (row, column, cellValue, index) => {
  if(cellValue==1){
    cellValue = '正常';
  }else if (cellValue==0){
    cellValue = '停用';
  }
  return cellValue;
}
</script>

<style scoped>

</style>